<template>
<!--  -->
<!-- 此页面为自定义组件：首页右上角头像显示 -->
<!--  -->

  <span class="avatar" :style="{ width: width + 'px', height: width + 'px' }">
    <!-- 如果avatar为空，则根据userId查询头像 -->
    <!-- ### proxy.globalInfo.avatarUrl在main.js文件中定义 -->
    <img 
      :src="
        avatar && avatar != '' 
          ? avatar : `${proxy.globalInfo.avatarUrl}${userId}?${timestamp}`"

      v-if="userId">
  </span>
</template>

<script setup>
import { getCurrentInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance();

// 从Framework传递过来的参数  父组件传递过来的参数，子组件通过defineProps接收
const props = defineProps({
    userId: {
        type: String,
    },
    avatar: {
        type: String,
    },
    timestamp: {
        type: Number,
        default: 0,
    },
    width: {
        type: Number,
        default: 40,
    },
});

//在Vue3 中,onMounted 是一个生命周期钩子函数,用于在组件渲染后执行（在<script>标签头部引入）
onMounted(() => {
    console.log("Avatar.vue -- 42 " + props.avatar);
    if (props.avatar && props.avatar != '') {
        console.log("Avatar.vue -- 44");
    } else {
        console.log("Avatar.vue -- 46");
    }
})
</script>

<style lang="scss" scoped>
.avatar {
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    img {
        width: 100%;
        object-fit: cover;
    }
}
</style>